<template>
  <div class="cart-wrapper">
    <!-- cart -->
    <section class="cart-wrapper-title">
      <span class="font-16"> 购物车 </span>
    </section>
    <!-- list -->
    <section class="cart-wrapper-content">
      <div
        class="cart-goods"
        v-for="(item, index) in cartGoods.stores"
        :key="index"
      >
        <van-checkbox-group v-model="checked" @change="checkAll">
          <div class="cart-goods-head">
            <van-checkbox :name="item.storeId"></van-checkbox>
            <span class="font-14">
              {{ item.storeName }}
            </span>
          </div>
          <div class="cart-goods-lists">
            <van-swipe-cell
              v-for="_item in item.goods"
              :key="_item.id"
              class="custome_swipe_cell"
            >
              <van-checkbox :name="_item.id"></van-checkbox>
              <van-card
                :num="_item.goodsNum"
                :price="_item.goodsPrice"
                desc="描述信息"
                :title="_item.goodsName"
                class="goods-card"
                :thumb="_item.goodsImg"
              />
              <template #right>
                <van-button
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                />
              </template>
            </van-swipe-cell>
          </div>
        </van-checkbox-group>
      </div>
    </section>
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked1">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Toast } from "vant";
export default defineComponent({
  setup() {
    const cartGoods = ref({
      total: "0.00",
      userId: 75616,
      stores: [
        {
          goods: [
            {
              domainNo: "92E21DE17C0CE872",
              goodsName: "大美丫火锅专用面",
              goodsImg:
                "http://snsall.oss-cn-qingdao.aliyuncs.com/92E21DE17C0CE872/goods/76540/2b8983b7-72ec-446c-bf9f-77d78e688903..jpg",
              goodsNum: 1,
              goodsPrice: 27,
              id: 479198,
              specKeyName: "60g*60袋/件:60g*60袋/件",
            },
            {
              domainNo: "92E21DE17C0CE872",
              goodsName: "大美丫火锅专用面",
              goodsImg: "https://img.yzcdn.cn/vant/cat.jpeg",
              goodsNum: 1,
              goodsPrice: 27,
              id: 479199,
              specKeyName: "60g*60袋/件:60g*60袋/件",
            },
          ],
          storeId: 1490,
          storeName: "青岛青鲁渔翁供应链管理有限公司",
        },
      ],
    });

    const onSubmit = () => Toast("点击按钮");

    const checked = ref([]);
    const checkAll = (names: any[]) => {
      console.log(names);
      // checkboxGroup.value.toggleAll(true);
    };
    return {
      cartGoods,
      onSubmit,
      checked,
      checkAll,
    };
  },
});
</script>

<style lang="scss" scoped>
.cart-wrapper {
  height: 100vh;
  padding: 50px 0;
  .cart-wrapper-title {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    z-index: 10;
    border-bottom: 1px solid #ccc;
  }
  .cart-wrapper-content {
    .cart-goods-head {
      line-height: 50px;
      display: flex;
      padding-left: 12px;
      span {
        text-indent: 20px;
      }
    }
    .delete-button {
      height: 100%;
    }
  }
  .van-submit-bar {
    bottom: 50px;
  }
  .custome_swipe_cell {
    /deep/.van-swipe-cell__wrapper {
      display: flex;
      background: var(--van-card-background-color);
      padding-left: 12px;
      margin-bottom: 10px;
    }
    .goods-card {
      flex: 1;
    }
  }
}
</style>
